import { Typography } from 'antd';
import React from 'react';
import { getNickname } from '@/services/User';
import { useState, useEffect } from 'react';

// 从 Typography 组件中解构出 Text，用于显示文本
const { Text } = Typography;

// 定义 UserName 组件
const UserName: React.FC = () => {
  // 定义 nickname 状态，用于存储用户昵称
  const [nickname, setNickname] = useState<string>();

  // 定义 handleNickname 方法，用于获取用户昵称并更新状态
  const handleNickname = async () => {
    try {
      // 调用 getNickname 服务方法获取用户昵称
      const response = await getNickname();
      if (response.success) {
        // 如果请求成功，将昵称存储到状态中
        setNickname(response.data);
      }
    } catch (error) {
      // 如果请求失败，打印错误信息
      console.error(error);
    }
  };

  // 使用 useEffect，在组件加载时调用 handleNickname 方法
  useEffect(() => {
    handleNickname();
  }, []);

  // 返回一个显示用户昵称的 Text 组件
  return <Text>{nickname}</Text>;
};

// 导出 UserName 组件
export default UserName;
